<script setup lang="ts">
import {computed} from "vue";

const props = defineProps<{
  color?: string;
  title: string;
  value: string | number;
}>()

const realColor = computed(() => {
  if (!props.color) {
    return "black";
  }
  if (props.color === 'yellow') {
    return '#F3A73B'
  }
  return props.color;
})
</script>

<template>
  <div>
    <el-descriptions-item>
      <template #label>
        <div class="item-label">{title}</div>
      </template>
      <div class="item-value" :style="{color:realColor}">
        {{ value }}
      </div>
    </el-descriptions-item>
  </div>
</template>

<style scoped>

.item-label {
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.item-value {
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
</style>